<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            伪元素选择器中的content属性值
            1. 字符串（将内容写在引号中）
            2. url()函数引入图片
            3. attr(属性)可以获取属性值，可以设置多个中间用空格隔开
            4. none空（伪元素会消失）
        */
        div::after {
            content: "123abc!@你好";
            content: url(http://contentcms-bj.cdn.bcebos.com/cmspic/559e460b4b6cd06169cd05223b7404db.jpeg?x-bce-process=image/crop,x_0,y_0,w_665,h_362);
            content: url(../../html/20230927/1.jpeg);
            content: attr(name) attr(age) attr(sex);
            content: none;
        }
        ul li::after {
            content: "|";
        }
        ul li:last-child::after {
            content: none;
        }
    </style>
</head>
<body>
    <div name="jack" age="18" sex="boy">hello 杰克</div>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</body>
</html>